import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { Tag, Button, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

// utils 
import dataCenter from '../../../utils/dataCenter'

class DeliverWayBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	timeType: 2,
        	timeTypeName: '节假日均可',
            shippingFee: 10,
        	shippingId: 1,
        	shippingName: '邮政快递包裹'
        }
    }
    componentDidMount() {
    	const { dispatch } = this.props
    	dispatch({
    		type: 'address/fetchShipping'
    	})
    }
    onDeliverChange(shippingId, shippingName, shippingFee) {
    	this.setState({
    		shippingId,
    		shippingName,
            shippingFee
    	})
    }
    onTimeChange(timeType, timeTypeName) {
    	this.setState({
    		timeType,
    		timeTypeName
    	})
    }
    onSubmitDeliver() {
    	if(!dataCenter.shipping) {
    		dataCenter.shipping = {}
    	}
    	dataCenter.shipping.timeType = this.state.timeType
		dataCenter.shipping.timeTypeName = this.state.timeTypeName

		dataCenter.shipping.shippingId = this.state.shippingId
        dataCenter.shipping.shippingName = this.state.shippingName
		dataCenter.shipping.shippingFee = this.state.shippingFee
		
		browserHistory.goBack()
    }
	render() {
		const { address } = this.props
		const { getFieldProps } = this.props.form

	 	return (
	 		<div className={styles["deliver-way-body"]}>
	 			<div className={styles['deliver-way-body-item']}>
	 				<div className={styles['deliver-way-body-item-title']}>
	 					<div className={styles['deliver-way-body-item-title-wrap']}>配送方式</div>
	 				</div>
	 				<div className={styles['deliver-way-body-item-tags']}>
	 					{
	 						address.shippingList && address.shippingList.map((ship, ii) => {
	 							return <Tag 
	 										key={ii} 
	 										selected={this.state.shippingId === ship.shippingId ? true : false} 
	 										onChange={this.onDeliverChange.bind(this, ship.shippingId, ship.shippingName, ship.shippingFee)}
	 										className={`${styles['deliver-way-body-item-tags-radio']} deliver-way-body-item-tags-radio`}
	 									>{ship.shippingName}</Tag>
	 						})
	 					}
	 				</div>
	 			</div>
	 			<div className={styles['deliver-way-body-item']}>
	 				<div className={styles['deliver-way-body-item-title']}>
	 					配送时间
	 				</div>
	 				<div className={styles['deliver-way-body-item-tags']}>
	 					<Tag selected={this.state.timeType === 2 ? true : false} onChange={this.onTimeChange.bind(this, 2, '节假日均可')}>节假日均可</Tag>
	 					<Tag selected={this.state.timeType === 1 ? true : false} onChange={this.onTimeChange.bind(this, 1, '工作日')}>工作日</Tag>
	 					<Tag selected={this.state.timeType === 0 ? true : false} onChange={this.onTimeChange.bind(this, 0, '周末')}>周末</Tag>
	 				</div>
	 			</div>

	 			<div className={styles['deliver-way-body-controller']}>
			    	<Button className="meyley-button-red" onClick={this.onSubmitDeliver}>确定</Button>
			    </div>
	 		</div>
	  	);
	}
};

DeliverWayBody.propTypes = {
};

export default createForm()(DeliverWayBody)
